<template>
    <div class="applynews">
        <div @click="newfriend">新朋友
        <span v-if="newcount">{{newcount}}</span>
        </div>
    </div>
</template>

<script>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

export default {
  name: 'Applynews',
  setup() {
    const router = useRouter();
    const Store = useStore();
    const newcount = computed(() => Store.state.friendlist.newfriend.length);
    function newfriend() {
      router.push('/newfriend');
    }
    return {
      newfriend,
      newcount,
    };
  },
};
</script>

<style scoped>
    .applynews{
        width: 100%;
        height: 40px;
        background-color: #ffffff;
        padding: 10px;
        margin-bottom: 10px;
        text-align: left;
    }
    span {
      display: inline-block;
      margin-left: 5px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      background-color: #ff0000;
      border-radius: 50%;
      color: #ffffff;
      text-align: center;
    }
</style>
